<template>
    <div class="options">
        <button class="select-all-btn" @click="checkAll">全选</button>
        <button class="check-btn" @click="checkArticle">审核 </button>
        <button class="delete-btn" @click="deleteArticle">删除</button>
    </div>
    <div class="article-list">
        <itemVue v-for="(item,key) in showData" :key="item.articleId" :state= item :isChecked="Allchecked"/>
    </div>

    <van-pagination v-model="currentPage" :total-items="Data.length" :items-per-page="PerPageNum" mode="simple" @change="PageChange"/>
</template>

<script>
import { reactive,toRefs,onBeforeMount } from 'vue';
import axios from '@/api/axios';
import {myDialog} from '../api/utils'
import { useStore } from "vuex"
import itemVue from '../components/article-item.vue'
import { Toast } from 'vant';
export default {
    setup() {
        const state = reactive({
            currentPage:1,
            PerPageNum:10,
            userType:0,
            Allchecked:false,
            Data:[],
            showData:[]
        })

        const store = useStore()
        const Articles = store.state.selectedArticles

        //从服务器拿数据，并且从仓库中获取登录用户数据
        onBeforeMount(async() => {
            const res = await axios.get('/article/getArticleData')
            state.Data = res.data
            state.userType = store.state.userInfo.userPower
            state.showData = res.data.slice((state.currentPage - 1) * state.PerPageNum ,state.PerPageNum * state.currentPage)
        })

        //全选事件
        function checkAll(){
            state.Allchecked = !state.Allchecked
        }
        //审核事件
        function checkArticle(){
            if(state.userType <= 0){
                Toast.fail('权限不足')
                return
            }
            myDialog('是否审核通过选中文章？',
            async ()=>{
                state.Allchecked = false
                const res = await axios.post('/article/passArticle',{id:Articles,data:{
                    isPassed:true
                }})
                state.Data = res.data
                state.showData = res.data.slice((state.currentPage - 1) * state.PerPageNum ,state.PerPageNum * state.currentPage)
            })
        }
        //删除文章事件
        function deleteArticle(){
            if(state.userType <= 0){
                Toast.fail('权限不足')
                return
            }
            myDialog('是否确认删除选中文章？',async()=>{
                const res = await axios.post('/article/deleteArticle',{id:Articles})
                state.Data = res.data
                state.showData = res.data.slice((state.currentPage - 1) * state.PerPageNum ,state.PerPageNum * state.currentPage)
            })
        }
        //切换下一页
        function PageChange(e){
            state.showData = state.Data.slice((e - 1) * state.PerPageNum,e * state.PerPageNum)
        }

    return { 
        ...toRefs(state),
        checkAll,
        checkArticle,
        deleteArticle,
        PageChange
     };
  },
  components:{
    itemVue
  }
}
</script>

<style lang="less" scoped>
.options{
    display: flex;
    margin-bottom: 4px;
    justify-content: space-between;
    button{
        height: 24px;
        border-radius: 10px;
        border: none;
    }
    .select-all-btn{
        margin-left: 20px;
        background-color: #7adae3;
    }
    .check-btn{

        background-color: aquamarine;
    }
    .delete-btn{
        margin-right: 20px;
        color: aliceblue;
        background-color: red;
    }
}

.article-list{
    overflow-y:scroll ;
    height: 460px;
}
</style>